<template>
  <div>
    <el-row :gutter="20" class="mb8" style="align-items: center">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
        >添加酒店</el-button>
      </el-col>
      <el-col v-if="match?.isRoom==1" :span="1.5">
        酒店可预定时间：{{ parseTime(match?.hqStart,'{y}-{m}-{d}') }} ~ {{ parseTime(match?.hqEnd,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isRoom==1" :span="1.5">
        酒店退订截止时间：{{ parseTime(match?.jdEnd,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isRoom==1" :span="1.5">
        酒店下单截止时间：{{ parseTime(match?.jdLast,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isRoom==1" :span="1.5">
        <el-button type="text" style="color: orange" @click="handleUpdateActive()">修改</el-button>
      </el-col>
      <right-toolbar :search="false" @queryTable="getList" />
    </el-row>

    <el-table
      ref="tableRef" v-loading="loading" :data="hotelList" row-key="id" :expand-row-keys="[]"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand" width="30">
        <template #default="props">
          <el-row justify="center">
            <el-table v-loading="props.row.loading" :data="props.row.rooms" style="width: 95%">
              <el-table-column label="房型图片" align="center" width="100" prop="photo">
                <template #default="scope">
                  <el-image style="width: 40px;height: 40px" :src="scope.row.photo.split(',')[0]" :preview-src-list="scope.row.photo.split(',')" />
                </template>
              </el-table-column>
              <el-table-column label="房型" align="center" prop="roomType" />
              <el-table-column label="床型" align="center" prop="bedType" />
              <el-table-column label="入住人数" align="center" prop="occupantsNum" />
              <el-table-column label="是否含早餐" min-width="90" align="center" prop="breakfastFlag">
                <template #default="scope">
                  {{ scope.row.breakfastFlag=='1'?'是':'否' }}
                </template>
              </el-table-column>
              <el-table-column label="早餐数" align="center" prop="breakfastNum">
                <template #default="scope">
                  {{ scope.row.breakfastFlag=='1'?scope.row.breakfastNum:'--' }}
                </template>
              </el-table-column>
              <el-table-column label="是否有窗户" min-width="90" align="center" prop="windowFlag">
                <template #default="scope">
                  {{ scope.row.windowFlag=='1'?'是':'否' }}
                </template>
              </el-table-column>
              <el-table-column label="是否有独立卫浴" align="center" min-width="120" prop="bathroomFlag">
                <template #default="scope">
                  {{ scope.row.bathroomFlag=='1'?'是':'否' }}
                </template>
              </el-table-column>
              <el-table-column label="单价（元）" min-width="100" prop="roomPrice" align="center">
                <template #default="scope">
                  <el-input v-if="scope.row.isEdit" v-model="scope.row.roomPrice" @keyup.enter="handleUpdateRoom(props.row,scope.row)" />
                  <span v-else>{{ scope.row.roomPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="房间数" prop="roomCount" align="center">
                <template #default="scope">
                  <el-input v-if="scope.row.isEdit" v-model="scope.row.roomCount" @keyup.enter="handleUpdateRoom(props.row,scope.row)" />
                  <span v-else>{{ scope.row.roomCount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否可加床" min-width="90" align="center" prop="addBedFlag">
                <template #default="scope">
                  {{ scope.row.addBedFlag=='1'?'是':'否' }}
                </template>
              </el-table-column>
              <el-table-column label="加床单价/晚" min-width="100" prop="bedPrice" align="center">
                <template #default="scope">
                  <div v-if="scope.row.addBedFlag=='1'">
                    <el-input v-if="scope.row.isEdit" v-model="scope.row.bedPrice" @keyup.enter="handleUpdateRoom(props.row,scope.row)" />
                    <span v-else>{{ scope.row.bedPrice }}</span>
                  </div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="面积" align="center" prop="area" />
              <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button v-if="scope.row.isEdit" type="text" @click="handleUpdateRoom(props.row,scope.row)">确定</el-button>
                  <el-button v-else type="text" @click="handleModifyRow(scope.row)">编辑</el-button>
                  <el-button v-if="scope.row.isEdit" type="text" @click="handleCancelRow(scope.row)">取消</el-button>
                  <el-button type="text" @click="handleDeleteRoom(props.row,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="酒店图片" width="100" align="center" prop="photos">
        <template #default="scope">
          <el-image style="width: 40px;height: 40px" :src="scope.row.photos.split(',')[0]" :preview-src-list="scope.row.photos.split(',')" />
        </template>
      </el-table-column>
      <el-table-column label="酒店名称" align="center" prop="name" :show-overflow-tooltip="true" min-width="150" />
      <el-table-column label="酒店地址" align="center" prop="addName" :show-overflow-tooltip="true" min-width="200" />
      <el-table-column label="酒店星级" align="center" prop="starLevel" width="100">
        <template #default="scope">
          {{ starLevelArr[scope.row.starLevel] }}
        </template>
      </el-table-column>
      <el-table-column label="入住时间" align="center" width="100" prop="checkInTime" />
      <el-table-column label="离店时间" align="center" width="100" prop="checkOutTime" />
      <el-table-column label="电话" align="center" prop="contact" width="120" />
      <el-table-column label="标签" align="center" prop="label" :show-overflow-tooltip="true" min-width="200" />
      <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="text" @click="handleAddRoom(scope.row)">选择房型</el-button>
          <el-button type="text" @click="handleHotelDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <add-hotel ref="addHotelRef" @complete="getList" />
    <add-room ref="addRoomRef" @complete="getRoomList" />
  </div>
</template>

<script setup>

import { getCurrentInstance, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { delMatchHotel, getActivity, getMatchHotel } from '@/api/logex/activity'
import AddHotel from './dialog/addHotel'
import AddRoom from './dialog/addRoom'
import { delActivityRoom, listActivityRoom, updateActivityRoom } from '@/api/logex/activityRoom'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['modifyTime'])
const route = useRoute()

const match = ref(null)
const hotelList = ref([])
const loading = ref(true)

const starLevelArr = ['零星', '一星', '二星', '三星', '四星', '五星', '六星', '七星']
const matchId = route.params.matchId

function getList() {
  loading.value = true
  hotelList.value = []

  getMatchHotel({
    activityId: matchId
  }).then(res => {
    loading.value = false
    hotelList.value = res.rows
  })
}

function getMatch() {
  getActivity(matchId).then(response => {
    match.value = response.data
  })
}

function handleUpdateActive() {
  emit('modifyTime')
}

function handleAdd() {
  proxy.$refs['addHotelRef'].open({
    matchId: matchId
  })
}

function handleHotelDelete(row) {
  proxy.$modal.confirm('是否确认删除酒店 "' + row.name + '"？').then(function() {
    loading.value = true
    return delMatchHotel(row.id)
  }).then(() => {
    getMatchHotel({
      activityId: matchId
    }).then(res => {
      hotelList.value = res.rows
    })

    proxy.$modal.msgSuccess('删除成功')
  }).finally(() => {
    loading.value = false
  })
}

function handleAddRoom(row) {
  proxy.$refs['addRoomRef'].open({
    rowId: row.id,
    matchId: row.activityId,
    hotelId: row.hotelId
  })
}

function handleExpandChange(row) {
  if (!row.rooms) {
    row.loading = true
    listActivityRoom({
      hotelId: row.id
    }).then(res => {
      row.loading = false
      row.rooms = res.rows
    })
  }
}

defineExpose({
  init: () => {
    getList()
    getMatch()
  },
  getMatch
})

//#region 房间操作
function handleModifyRow(row) {
  const { bedPrice, roomPrice, roomCount } = row
  row.baseData = { bedPrice, roomPrice, roomCount }
  row.isEdit = true
}

function handleCancelRow(row) {
  row.bedPrice = row.baseData.bedPrice
  row.roomPrice = row.baseData.roomPrice
  row.roomCount = row.baseData.roomCount
  row.isEdit = false
}

function handleUpdateRoom(hotel, row) {
  if (parseFloat(row.roomPrice) != row.roomPrice) {
    proxy.$modal.msgError('请输入正确的单价')
    return
  }
  if (parseInt(row.roomCount) != row.roomCount) {
    proxy.$modal.msgError('请输入正确的房间数')
    return
  }
  if (parseFloat(row.bedPrice) != row.bedPrice) {
    proxy.$modal.msgError('请输入正确的加床单价')
    return
  }

  hotel.loading = true
  updateActivityRoom({
    id: row.id,
    bedPrice: row.bedPrice,
    roomPrice: row.roomPrice,
    roomCount: row.roomCount
  }).then(res => {
    proxy.$modal.msgSuccess('更新成功')
    row.isEdit = false
  }).finally(() => {
    hotel.loading = false
  })
}

function handleDeleteRoom(hotel, room) {
  proxy.$modal.confirm('是否确认删除酒店房间"' + room.roomType + '"的数据项？').then(function() {
    hotel.loading = true
    return delActivityRoom(room.id)
  }).then(() => {
    listActivityRoom({
      hotelId: hotel.id
    }).then(res => {
      hotel.rooms = res.rows
    })
    proxy.$modal.msgSuccess('删除成功')
  }).finally(() => {
    hotel.loading = false
  })
}

function getRoomList(acHotelId) {
  const hotel = _.find(hotelList.value, (h) => {
    return h.id === acHotelId
  })

  hotel.loading = true
  listActivityRoom({
    hotelId: acHotelId
  }).then(res => {
    hotel.loading = false
    hotel.rooms = res.rows

    proxy.$refs['tableRef'].toggleRowExpansion(hotel, true)
  })
}

//#endregion

</script>

<style scoped>

</style>
